<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css" />

    <title>购物车</title>
  </head>
  <body>
    <div id="app">
      <cart-component></cart-component>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jQuery/jquery-3.4.1.slim.min.js"></script>
    <script src="js/bootstrap/popper.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
    <script>
      //4. 声明cart-list组件
      Vue.component("cart-list", {
        props: ["items"],
        template: `
		<div class="row justify-content-center mt-2">
          <div class="col-6 text-center">
            <table class="table table-striped table-bordered text-center mb-2">
              <thead>
                <tr>
                  <td>商品名称</td>
                  <td>价格</td>
                  <td>数量</td>
                  <td>操作</td>
                </tr>
              </thead>
              <tbody>
                <tr :key='p.id'  v-for='p in items'>
                  <td>{{p.name}}</td>
                  <td>{{p.price}}</td>
                  <td>
                    <div class="input-group input-group-sm">
                      <div class="input-group-prepend">
                        <button class="btn btn-outline-secondary" type="button"  @click='sub(p.id)'>
                          -
                        </button>
                      </div>
                      <input
                        type="text"
                        :value='p.num'
                        style="width: 10px;"
                        class="form-control text-center"
                        @blur='changeNum(p.id,$event)'
                      />
                      <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button" @click='add(p.id)'>
                          +
                        </button>
                      </div>
                    </div>
                  </td>
                  <td>
                    <button @click='$emit("del-item",p.id)' >删除</button>
                  </td>
                </tr>                
              </tbody>
            </table>
          </div>
        </div>
			`,
        methods: {
          changeNum(id, event) {
            //通过event获得目标对象即input框,从而获得对应的数据
            this.$emit("change-num", {
              id: id,
              num: parseInt(event.target.value),
              type: "change",
            });
          },
          add(id) {
            this.$emit("change-num", {
              id: id,
              num: 1,
              type: "btn",
            });
          },
          sub(id) {
            this.$emit("change-num", {
              id: id,
              num: -1,
              type: "btn",
            });
          },
        },
      });

      //3.声明cart-total组件
      Vue.component("cart-total", {
        props: ["items"],
        template: `
			<div class="row justify-content-center mb-2">
				<div class="col-6 text-right bg-success py-2">
					<strong>总价:<span class='text-danger'>{{total}}</span></strong> <button>结算</button>
				</div>
            </div>
			`,
        computed: {
          total() {
            let sum = 0;
            this.items.forEach((item) => {
              sum += item.num * item.price;
            });
            return sum;
          },
        },
      });

      //2.声明cart-title组件
      Vue.component("cart-title", {
        props: ["uname"],
        template: `
			<div class="row justify-content-center">
				<div class="col-6 text-center bg-info py-3">
					<strong>{{uname}}购物车</strong>
				</div>
            </div>`,
      });
      //1. 声明cart-component组件
      Vue.component("cart-component", {
        data() {
          return {
            username: "Haoren",
            items: [
              {
                id: 1001,
                name: "Java核心技术第九版",
                price: 100,
                num: 1,
              },
              {
                id: 1002,
                name: "Java入门到放弃",
                price: 200,
                num: 1,
              },
              {
                id: 1003,
                name: "Java的前世今生",
                price: 100,
                num: 1,
              },
              {
                id: 1004,
                name: "27天精通Java",
                price: 200,
                num: 1,
              },
              {
                id: 1005,
                name: "Java编程思想",
                price: 100,
                num: 2,
              },
            ],
          };
        },
        template: `
	    <div class="container mt-5">
         <cart-title :uname="username"></cart-title>
         <cart-list :items='items' @del-item='delHandle($event)' @change-num='changeNum($event)'></cart-list>
         <cart-total :items='items'></cart-total>
      </div>`,
        methods: {
          delHandle(id) {
            console.log(id);
            //1. 根据id值,从集合中将数据移除
            //1.1 根据id获得该数据在集合中的索引
            let index = this.items.findIndex((item) => item.id == id);
            //1.2 根据索引删除对应的数据
            this.items.splice(index, 1);
          },
          changeNum(datas) {
            console.log(datas);
            if (datas.type == "change") {
              //根据id获得集合中的对应数据,修改其信息
              this.items.some((item) => {
                if (item.id == datas.id) {
                  item.num = datas.num;
                  return true; //终止遍历
                }
              });
            }else if(datas.type=='btn'){
              this.items.some((item) => {
                if (item.id == datas.id) {
                  item.num += datas.num;
                  return true; //终止遍历
                }
              });
            }
          },
        },
      });

      const vm = new Vue({
        el: "#app",
        data: {},
      });
    </script>
  </body>
</html>
